<template>
  <div class="page">
    <div class="nav">

      <div class="center">
        <el-input
            placeholder="查询项目"
            prefix-icon="el-icon-search"
            @change="titleSearch"
            v-model="input">
        </el-input>
        <el-select v-model="value1" placeholder="项目状态" @change="statusSearch">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label">
          </el-option>
        </el-select>
        <!--        <el-select v-model="value2" placeholder="项目更新时间">-->
        <!--          <el-option-->
        <!--              v-for="item in option"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value">-->
        <!--          </el-option>-->
        <!--        </el-select>-->
      </div>

      <el-card shadow="hover" class="box-card" @click.native="cardClick">
        <div class="pro">
          <i class="el-icon-plus"></i>
          <span class="new">新建项目</span>
        </div>
      </el-card>

      <div v-if="this.examShow === 1">
        <el-card shadow="hover" class="box-card" v-for="(item, index) in exams" :key="index" @mouseenter.native="mouseOver(index)" @mouseleave.native="mouseOut()">
          <div slot="header">
            <span>{{item.examname}}</span>
            <el-button style="float: right; padding: 3px 0;background-color: #ebf8fa" type="text">{{item.status}}</el-button>
          </div>
          <div class="desc">
            <span>{{item.examdesc}}</span>
          </div>
          <div class="body date">
            <span style="color: #707070; font-size: 15px">0份数据</span>
            <span style="color: #707070; font-size: 15px">{{dataFormat(item.starttime)}}</span>
          </div>
          <div class="body edit" v-if="showEd(index)">
            <span class="one" @click="editClick(item.id)" ><i class="el-icon-edit"></i>编辑</span>
            <span class="one" @click="preClick(item.id)"><i class="el-icon-view"></i>预览</span>
            <span class="one" @click="tongClick(item.id)"><i class="el-icon-s-data"></i>统计</span>
            <span class="one" @click="deleClick(item.id)">
              <el-tooltip content="删除项目" placement="bottom" effect="light">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </span>
          </div>
        </el-card>
      </div>

      <div v-if="this.examShow === 2">
        <el-card shadow="hover" class="box-card" v-for="(item, index) in exam" :key="index" @mouseenter.native="mouseOver(index)" @mouseleave.native="mouseOut()">
          <div slot="header">
            <span>{{item.examname}}</span>
            <el-button style="float: right; padding: 3px 0;background-color: #ebf8fa" type="text">{{item.status}}</el-button>
          </div>
          <div class="desc">
            <span>{{item.examdesc}}</span>
          </div>
          <div class="body date">
            <span style="color: #707070; font-size: 15px">0份数据</span>
            <span style="color: #707070; font-size: 15px">{{dataFormat(item.starttime)}}</span>
          </div>
          <div class="body edit" v-if="showEd(index)">
            <span class="one" @click="editClick(item.id)" ><i class="el-icon-edit"></i>编辑</span>
            <span class="one" @click="preClick(item.id)"><i class="el-icon-view"></i>预览</span>
            <span class="one" @click="tongClick(item.id)"><i class="el-icon-s-data"></i>统计</span>
            <span class="one" @click="deleClick(item.id)">
              <el-tooltip content="删除项目" placement="bottom" effect="light">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </span>
          </div>
        </el-card>
      </div>

      <div v-if="this.examShow === 3">
        <el-card shadow="hover" class="box-card" v-for="(item, index) in exam" :key="index" @mouseenter.native="mouseOver(index)" @mouseleave.native="mouseOut()">
          <div slot="header">
            <span>{{item.examname}}</span>
            <el-button style="float: right; padding: 3px 0;background-color: #ebf8fa" type="text">{{item.status}}</el-button>
          </div>
          <div class="desc">
            <span>{{item.examdesc}}</span>
          </div>
          <div class="body date">
            <span style="color: #707070; font-size: 15px">0份数据</span>
            <span style="color: #707070; font-size: 15px">{{dataFormat(item.starttime)}}</span>
          </div>
          <div class="body edit" v-if="showEd(index)">
            <span class="one" @click="editClick(item.id)" ><i class="el-icon-edit"></i>编辑</span>
            <span class="one" @click="preClick(item.id)"><i class="el-icon-view"></i>预览</span>
            <span class="one" @click="tongClick(item.id)"><i class="el-icon-s-data"></i>统计</span>
            <span class="one" @click="deleClick(item.id)">
              <el-tooltip content="删除项目" placement="bottom" effect="light">
                <i class="el-icon-delete"></i>
              </el-tooltip>
            </span>
          </div>
        </el-card>
      </div>

      <div class="fenpage">
        <el-pagination
            layout="prev, pager, next"
            :total="this.totalPage"
            @current-change="currentPage">
        </el-pagination>
      </div>


    </div>
  </div>
</template>

<script>
export default {
  name: "MyProject",
  // inject:[`reload`],
  data() {
    return {
      totalExam: [],
      exams: [],
      exam: [],
      examShow: 1,
      input: '',
      showReport: false,

      sendExam:[
        {
          questiontype: '',
          questionid: '',
          answer: [{
            answer: ''
          }]
        }
      ],

      currentShow:'',

      curPage: 1,
      totalPage: 0,

      currentExam: '',
      value1: '',
      options: [ {
        value: 1,
        label: '已发布'
      }, {
        value: 2,
        label: '未发布'
      }],

      value2: '',
      option: [{
        value: 1,
        label: '过去一周内'
      }, {
        value: 2,
        label: '过去一月内'
      }, {
        value: 3,
        label: '过去一年内'
      }],

    }
  },

  methods: {
    send(){
      let test = []
      let answer = []
      for (let i in this.currentExam){
        // this.sendExam.push({questiontype:this.currentExam[i].questiontype})
        for (let j in this.currentExam[i].answer){
          answer.push({answer:this.currentExam[i].answer[j].answer})
          // this.sendExam[i].answer.push({answer:this.currentExam[i].answer[j].answer})
        }
        test.push({
          questiontype:this.currentExam[i].questiontype,
          questionid:this.currentExam[i].questionid,
          answer:answer
        })
        answer = []
      }
      this.sendExam = test
    },
    cardClick(){
      this.$router.push('/CreateExam')
    },
    editClick(id){
      console.log(id)
      console.log(this.totalExam)
      if(this.totalExam[id - 1].status === "已发布"){
        this.$confirm('你修改已发布的试题时，试题会暂停发布，你需在修改完后再次发布试题才可继续进行收集，原试题链接不会改变', '是否暂停发布?', {
          confirmButtonText: '暂停发布',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateStatus(id)
          this.loading()
          this.sendDate(id)
          this.$router.push('/EditPage');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消编辑'
          });
        });
      }else{
        this.loading()
        this.sendDate(id)
        this.$router.push('/EditPage');
      }
    },
    updateStatus(id){
      this.$axios.post('exam/update',{
        id: id,
        status: 0
      }).then(res =>{
        console.log(res)
      })
    },
    preClick(id){
      this.$router.push('/Preview')
      this.loading()
      this.sendDate(id)
    },
    tongClick(id){
      // this.loading();
      this.$router.push('/DataReport')
      this.sendDate(id)
      setTimeout(() => {
        // console.log(888888887)
        // console.log(this.sendExam)
        this.$axios.post('exam/showInfo',this.sendExam,{
              params:{
                examid: id
              }
            },
        ).then(res => {
          console.log(res);
          console.log(res.data);
          this.$store.commit('getReport',{
            reportDate: res
          });
        });
      },2000)
    },

    deleClick(id){
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('exam/delete',
            {
              "id": id
            }).then(res => {
          if (res.data.code === 200)
          {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    sendDate(id){
      this.$axios.post('exam/showQuestions',
          {
            "id": id
          }).then(res => {
        console.log(res.data);
        this.currentExam = res.data;
        this.send()
        // console.log(this.sendExam)
        this.$store.commit('getCurrentExam',{
          currentExam: this.currentExam
        });
        this.$store.commit('getCurrentTitle',{
          currentTitle: this.totalExam[id - 1]
        });
        // setTimeout(() => {
        //   this.currentExam = res.data;
        //   this.$store.commit('getCurrentExam',{
        //     currentExam: this.currentExam
        //   });
        //   this.$store.commit('getCurrentTitle',{
        //     currentTitle: this.totalExam[id - 1]
        //   });
        // }, 1000);
      })
    },

    loading(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
        // background: '#FFFFFFE6'
      });
      setTimeout(() => {
        loading.close();
      }, 550);
    },
    mouseOver(index){
      this.currentShow = index
    },
    mouseOut(){
      this.currentShow = ''
    },
    showEd(index){
      if (index === this.currentShow){
        return true
      }
      return false
    },

    getData(){
      this.$axios.get('exam/examList')
          .then(res => {
            // console.log(res);
            // console.log(res.data);
            this.totalExam = res.data;
            for (let i in this.exams){
              if (this.exams[i].status === 1){
                this.exams[i].status = '已发布'
              }else{
                this.exams[i].status = '未发布'
              }
            }
            for (let i in this.totalExam){
              if (this.totalExam[i].status === 1){
                this.totalExam[i].status = '已发布'
              }else{
                this.totalExam[i].status = '未发布'
              }
            }
          })
      this.$axios.get('exam/pageExams', {
        params: {
          pageNo:this.curPage,
          pageSize:7
        }
      }).then(res => {
        // console.log(res);
        // console.log(res.data);
        this.exams = res.data.detail.exams;
        this.totalPage = res.data.detail.pages * 10;
        for (let i in this.exams){
          if (this.exams[i].status === 1){
            this.exams[i].status = '已发布'
          }else{
            this.exams[i].status = '未发布'
          }
        }
      })
    },

    titleSearch(){
      let flag = true;
      this.exam = [];
      for (let i in this.totalExam){
        if(this.totalExam[i].examname === this.input){
          this.examShow = 2;
          this.exam.push(this.totalExam[i]);
          flag = false;
        }
        if(this.input === ''){
          this.examShow = 1;
          flag = false;
        }
      }
      if (flag){
        this.$message.error('此项目不存在！！！');
      }
    },

    statusSearch(){
      let flag = true;
      this.exam = [];
      for (let i in this.totalExam){
        if(this.totalExam[i].status === this.value1){
          this.examShow = 3;
          this.exam.push(this.totalExam[i]);
          flag = false;
        }
        if(this.value1 === ''){
          this.examShow = 1;
          flag = false;
        }
      }
      if (flag){
        this.$message.error('此项目不存在！！！');
      }
    },

    // statusSearch(){
    //   let flag = true;
    //   this.exam = [];
    //   for (let i in this.exams){
    //     if(this.exams[i].status === this.value1){
    //       this.examShow = 3;
    //       this.exam.push(this.exams[i]);
    //       flag = false;
    //     }
    //     if(this.value1 === ''){
    //       this.examShow = 1;
    //       flag = false;
    //     }
    //   }
    //   if (flag){
    //     this.$message.error('此项目不存在！！！');
    //   }
    // },

    dataFormat(value) {
      let year = value.substr(0, 4)
      let month = value.substr(5, 2)
      let day = value.substr(8, 2)
      // var hour = value.substr(11, 2)
      // var min = value.substr(14, 2)
      // var second = value.substr(17,2)
      return year + "-" + month + "-" + day
    },

    currentPage(page){
      // console.log(page)
      this.curPage = page;
      this.getData();
    }
  },

  mounted() {
    this.getData();
  },



}
</script>

<style scoped>
.page {
  position: relative;
  background-color: #E9EEF3;
}
.nav {
  margin:  25px auto;
  width: 1300px;
  height: 700px;
  background-color: #E9EEF3;
  overflow:hidden;
}
.nav .center {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 10px 10px;
  display: flex;
  flex-wrap: nowrap;
}
.desc {
  font-size: 13px;
}
.nav .center>>>.el-input {
  width: 150px;
  margin-right: 10px;
}
.nav .center>>>.el-input__inner {
  height: 30px;
}
.nav .center>>>.el-icon-search {
  position: absolute;
  left: 0;
  bottom: 4px;
}
.nav .center>>>.el-input__suffix {
  top: 5px;
}
.nav .box-card {
  float: left;
  margin: 10px 10px;
  width: 280px;
  height: 180px;
  transition: all 250ms cubic-bezier(.02,.01,.47,1);
}
.nav .box-card:hover {
  box-shadow: 0 1rem 2rem 0 rgba(48,55,66,0.15);
  transform: translate(0,-5px);
  transition-delay: 0s !important;
}

.nav .box-card>>>.el-card__body {
  position: relative;
  color: #87a6cd;
  font-size: 17px;
}
.nav .box-card>>>.el-card__body .pro {
  position: absolute;
  top: 80px;
  left: 85px;
}
.nav .box-card>>>.el-card__body .new:hover {
  text-shadow: 1px 2px 2px #B3C0D1;
}
.nav .box-card>>>.el-card__body i:hover {
  text-shadow: 1px 2px 2px #B3C0D1;
}
.nav .box-card>>>.el-card__body .body{
  position: absolute;
  left: 10px;
  top: 90px;
  width: 400px;
  height: 50px;
}
.nav .fenpage {
  position: absolute;
  bottom: 70px;
  height: 50px;
  width: 1200px;
  text-align: center;
  /*background-color: #87a6cd;*/
}
.date {
  display: flex;
  justify-content:space-around;
}
.edit {
  border-top: 1px solid #cddae7;
  display: flex;
  justify-content:space-around;
  background-color: white;
}
.edit .one {
  cursor: pointer;
}
.edit .one:hover {
  color: #409EFF;
}
.nav .box-card[data-v-6a694ec9] .el-card__body .body {
  width: 250px;
}

</style>
